<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>动态组件</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            input[type=text] { width: 90% ; }
            .active{ background: #b9fdc9; }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div id="app">
            <button v-for="t in tabs" :class="{active: currentTab==t.title}" @click="currentTab = t.title">{{t.text}}</button>
            <hr>
            <keep-alive>
                <component :is="currentTabComponent"></component>
            </keep-alive>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        currentTab: 'introduce',
                        tabs: [
                            { title: 'introduce' , text: '睡觉介绍'  },
                            { title: 'comment' , text: '睡觉原因'  } ,
                            { title: 'qa' , text: '睡觉感问答'  }
                        ]
                    }
                },
                computed: {
                    currentTabComponent(){
                        return 'tab-' + this.currentTab ;
                    }
                }
            });

            app.component( 'tab-introduce' , {
                template: `<div> <input type="text" v-model="content"> </div>` ,
                data(){
                    return { content: '教室里睡觉怎么那么香呢？' }
                }
            });

            app.component( 'tab-comment' , {
                template: `<div> 因为捂得严实，人多力量大，还有我的催眠。 </div>`
            });

            app.component( 'tab-qa' , {
                template: `<div> 有人睡过吗？怎么样？是不是特别香？ </div>`
            });

            app.mount( '#app' );
        </script>

    </body>
</html>